<template>
    <div class="main">

        <div class="header">
            <!-- 注意版心的 -->
            <div class="content w">
                <!-- 左边 -->
                <!-- <div class="nav-left"></div> -->

                <!-- 右边 -->
                <!-- <div class="nav-right"></div> -->

                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#2c3e50"
                    text-color="#fff" active-text-color="#ffd04b">

                    <el-menu-item index="1-1" @click="goHome">首页</el-menu-item>

                    <el-submenu index="2">
                        <template slot="title">教程导航</template>
                        <el-menu-item index="2-1" v-for="item in navList" :key="item.nav_id"
                            @click="goNavDetail(item.nav_text)">{{ item.nav_text }}</el-menu-item>
                        <!-- <el-menu-item index="2-1">JavaScript</el-menu-item> -->
                        <!-- <el-menu-item index="2-2">ES6</el-menu-item>
                        <el-menu-item index="2-3">Css3</el-menu-item>
                        <el-menu-item index="2-4">HTML</el-menu-item>
                        <el-menu-item index="2-5">Vue</el-menu-item>
                        <el-menu-item index="2-6">Node.js</el-menu-item> -->
                    </el-submenu>
                </el-menu>

                <div class="search-login">
                    <el-input placeholder="请输入内容" v-model="search_value"  class="input-with-select">

                        <el-button type="primary" slot="append" @click="toSearch">搜索</el-button>
                    </el-input>

                    <!-- 登录注册 -->
                    <div class="login-regsiter" v-if="useInfo.code != 200">
                        <el-link type="primary" @click="goUser(false)">注册</el-link>
                        <el-link type="primary" @click="goUser(true)">登录</el-link>
                    </div>



                    <!-- 登录成功后显示一个退出登录和 -->

                    <div class="login-userInfo" v-else>
                        <el-avatar :size="40">
                            <img :src="useInfo.user_avatar" />
                        </el-avatar>
                        <el-dropdown @command="changPage">
                            <span class="el-dropdown-link">
                                {{ useInfo.user_name }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="/userinfo">个人信息</el-dropdown-item>
                                <el-dropdown-item command="/changepassword">修改密码</el-dropdown-item>
                                <el-dropdown-item command="exit">退出登录</el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>


            </div>


        </div>


        <div class="w">
            <router-view />
        </div>
    </div>
</template>
  
  
<script>

import { videoNav } from '../http/request'
export default {
    data() {
        return {
            activeIndex: '1',
            activeIndex2: '1',

            // 用户信息
            useInfo: {},

            // 导航数据
            navList: [],

            // 搜索变量
            search_value:""
        };
    },

    created() {
        // 获取用户的信息，然后进行显示对应 用户头像和名字  然后显示退出登录/修改密码

        let useInfo = localStorage.getItem('useInfo');

        //    获取头像
        if (useInfo) {
            console.log(3333);
            this.useInfo = JSON.parse(useInfo);
        }

        this.getNav();

    },


    methods: {
        // handleSelect(key, keyPath) {
        //     console.log(key, keyPath);
        // },

        goUser(bol) {
            console.log('bol', bol);
            this.$router.push({ path: '/userlogin', query: { bol } })
        },

        // 退出登录
        exit() {

        },

        changPage(command) {

            // console.log('1111111111', command);
            // this.$router.push(path)

            if (command == 'exit') {
                localStorage.removeItem('useInfo');
                this.useInfo = {}
                return
            }

            this.$router.push(command)
        },

        // 获取导航

        async getNav() {
            await videoNav().then(res => {
                console.log('res', res);

                this.navList = res.data.result
            }).catch(err => {
                console.log('err', err);
            })
        },

        //跳转导航的详情
        goNavDetail(video_navigate) {
            // console.log('id', nav_id);

            // // 判断token是否存在
            // if (!this.useInfo.token) {
            //     this.$message({
            //         message: '请登录',
            //         type: 'error'
            //     });
            //     return
            // }

            // 跳转导航详情位置

            this.$router.push({path:"/navdetail",query:{video_navigate}})

            // 判断用户是否登录 如果没有登录那么无法获取
            // console.log(66666);
        },

        // 回到首页
        goHome(){
            if(this.$route.name=="HomeView"){
                return
            }
         
            this.$router.push('/homeview')
        },


        toSearch(){
            console.log('search_value',this.search_value)

            let value = this.search_value;

            // 这里面进行校正

            this.$router.push({path:"/search",query:{value}})
        }
    }
}
</script>
  
<style lang="scss">
* {
    padding: 0;
    margin: 0;
}

body {
    min-width: 1200px;
}

.header {
    height: 60px;
    background: #2c3e50;

    .content {
        height: 100%;
        // background: pink;

        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-input-group__append {
            background: #409dfe;
            color: white;
            border-color: #409dfe;
        }

        .search-login {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .login-regsiter {
            margin-left: 80px;
            display: flex;
            // justify-content: space-between;

            span {
                text-align: center;
                width: 60px;

            }

            a {
                margin-left: 10px;
            }
        }

        .login-userInfo {
            width: 220px;
            margin-left: 30px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        // div {
        //   height: 100%;
        //   width: 200px;
        //   background: yellow;
        // }
    }
}

.w {
    width: 1200px;
    margin: 0 auto;
}
</style>
  